<template>

    <UxDialog class="connect-manage" :visible="!!value" @close="onClose()" :title="title">

        <!-- 店铺 -->
        <BrandingConnectStore v-if="status == 'store'" filter="unlink" :type="type" :detail="value" @update="onUpdate()" />

        <!-- 产品 -->
        <BrandingConnectProduct v-else-if="status == 'product'" :type="type" filter="unlink" :detail="value" @update="onUpdate()" />

        <!-- 显示默认界面 -->
        <div class="connect-init" v-else>
            <ul>
                <li>
                    <figure @click="status = 'product'"><img src="https://img.podpartner.com/static/images-20230202/brand/connect-product.png"></figure>
                    <p>Link to product template(s)</p>
                </li>

                <li>
                    <figure @click="status = 'store'"><img src="https://img.podpartner.com/static/images-20230202/brand/connect-store.png"></figure>
                    <p>Link to store(s)</p>
                </li>
            </ul>
        </div>
    </UxDialog>
</template>
<script>
export default {
    name: "ConnectManage",
    props: {
        value: { type: Object, default: () => { return null } },
        type: { type: String, default: '' },
    },
    data () {
        return {
            status: '',
            change: false,
        };
    },
    computed: {
        title () {
            if (!this.status) {
                return 'Please choose a linking option';
            } else if (this.status == 'store') {
                return 'Stores'
            } else if (this.status == 'product') {
                // return 'Products'
                return ''
            }
        }
    },
    methods: {
        onUpdate () {
            this.change = true;
        },
        onClose () {
            this.change && this.$emit('update')
            this.$emit('input', null)
            this.status = '';
            this.change = false;
        },
    },
    created () {
        this.change = false;
    }
};
</script>
<style lang="scss" scoped>
.connect-manage::v-deep {
    & > .dialog-content > h2 {
        font-weight: bold;
        font-size: 14px;
    }
}
.connect-init {
    width: 500px;
    height: 280px;
    display: flex;
    align-items: center;

    ul {
        display: flex;
        width: 100%;
        align-items: center;
        position: relative;

        &:before {
            content: '';
            position: absolute;
            left: 50%;
            top: 17px;
            width: 1px;
            height: 80px;
            background: #f0f0f0;
        }

        li {
            width: 50%;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            figure {
                width: 120px;
                height: 120px;
                background: #f6f6f6;
                border-radius: 8px;
                padding: 17px;
                box-sizing: border-box;
                cursor: pointer;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            p {
                margin-top: 12px;
                height: 18px;
                font-size: 14px;
                color: #000000;
                line-height: 18px;
            }

            &:nth-child(1) figure:hover {
                background: #e1edf2;
            }
            &:nth-child(2) figure:hover {
                background: #f5ebef;
            }
        }
    }
}
</style>
